<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width:400px">
            <el-form-item label="旧密码" prop="oldpass">
                <el-input type="password" v-model.number="ruleForm.oldpass"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
import Axios from 'axios';
  export default {
    data() {
      var Pass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
            if(value == this.ruleForm.oldpass){
                callback(new Error('新密码不能与旧密码相同!'));
            }
            if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
            }
          callback();
        }
      };
      var checkPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        var oldpass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if(value!=this.$store.getters.pass){
              callback(new Error('旧密码不正确'));
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          oldpass: ''
        },
        rules: {
          pass: [
            { validator: Pass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: checkPass, trigger: 'blur' }
          ],
          oldpass: [
            { validator: oldpass, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
        ...mapGetters(['pass']),
        ...mapActions(['updatedlogin','setPass']),
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            Axios({
                method:"post",
                url:'http://localhost:3000/users/updatepass',
                data:{
                    name:this.$store.getters.name,
                    password:this.ruleForm.pass,
                },
                dataType:'json',
            }).then((d)=>{
                if(d){
                    this.$message({
                    showClose: true,
                    message: '修改成功！',
                    type: 'success'
                    });
                    this.updatedlogin(false);
                    this.setPass(this.ruleForm.pass);
                    this.$router.push('/login');
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>